<template>
  <div class="wechatPayment-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>财务中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/information' }">结算中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/information' }">微信支付代收</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="wechatPayment-content">
      <div class="title">
        微信支付代收
      </div>
      <!-- 统计 -->
      <div class="statistic">
        <div class="item">
          <span class="name">当前金额:</span>
          <span class="value">¥ 656.00</span>
        </div>
        <div class="line"></div>
        <div class="item">
          <span class="name">可提现金额:</span>
          <span class="value">¥ 556.00</span>
        </div>
      </div>
      <!-- 说明 -->
      <div class="desc">
        <div class="text">
          说明：为了防止用户退款时，账户中余额不足，系统自动锁定100元
        </div>
        <div class="formula">
          可提现金额 = 当前余额 - 100.00 - 已申请提现但未审核的金额（含手续费） - 每天应归还分期的金额 - 每天应还租赁分期的金额
        </div>
      </div>
      <!-- 表格 -->
      <div class="content tables">
        <div class="tab">
          <div class="left">
            <el-button round :color="tabActive == 1 ? '#0071bb' : ''" @click="changeTab(1)">入账记录</el-button>
            <el-button round :color="tabActive == 2 ? '#0071bb' : ''" @click="changeTab(2)">提现记录</el-button>
          </div>
        </div>
        <div class="search">
          <el-form :inline="true" :model="formInline" style="width:100%;display: flex;">
            <el-form-item label="时间段">
              <el-time-picker v-model="formInline.region" is-range range-separator="-" start-placeholder="开始时间"
                end-placeholder="结束时间" />
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input v-model="formInline.region" placeholder="请输入订单编号"></el-input>
            </el-form-item>
            <span class="btn">
              <el-button round color="#0071bb" :icon="Search">搜索</el-button>
              <el-button round :icon="RefreshLeft">重置</el-button>
              <el-dropdown :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button round color="#0071bb" :icon="HelpFilled" style="margin: 0 10px;">筛选</el-button> </span>
                <template #dropdown>
                  <el-dropdown-menu style="max-height:300px">
                    <el-dropdown-item v-for="(item, index) in checkArr" :key="index" @click.stop="filterTableData(item)">
                      <el-checkbox v-model="item.show" size="large" :label="item.label" />
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button round :icon="Refresh">刷新</el-button>
            </span>
            <div class="apply" v-if="tabActive == 2">
              <el-button round color="#0071bb" @click="onApply()">申请提现</el-button>
            </div>
          </el-form>
        </div>
        <el-table :data="tableData1" style="width: 100%" v-if="tabActive == 1">
          <!-- 动态表头 -->
          <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in headerArr" :key="index">
          </el-table-column>
        </el-table>
        <el-table :data="tableData2" style="width: 100%" v-if="tabActive == 2">
          <!-- 动态表头 -->
          <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in headerArr" :key="index">
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页 -->
      <div class="page_number">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size" :disabled="disabled"
          layout="prev, pager, next, jumper,total" :total="10" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 申请提现 -->
    <Apply v-if="showApply" @close="onClose()" @submit="onSubmit()"></Apply>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Refresh, Search, RefreshLeft, HelpFilled } from "@element-plus/icons-vue";
import Apply from './components/apply.vue'
const currentPage = ref(1);
const pageSize = ref(1);
const disabled = ref(false)
// 入账记录表格数据
const tableData1 = [
  {
    id: '1',
    time: "2024-05-12",
    no: '20240512555432652',
    content: '零售柜销售',
    money: '1066.00',
    balance: "63255.00"
  },
  {
    id: '2',
    time: "2024-05-12",
    no: '20240512555432652',
    content: '零售柜销售',
    money: '1066.00',
    balance: "63255.00"
  },
  {
    id: '3',
    time: "2024-05-12",
    no: '20240512555432652',
    content: '零售柜销售',
    money: '1066.00',
    balance: "63255.00"
  },
]
const tabActive = ref(1)
const formInline = ref({
  user: '',
  region: ''
})
const changeTab = (value: number) => {
  tabActive.value = value
  if (value == 1) {
    checkArr.value = [
      { label: '入账时间', prop: 'time', show: true },
      { label: '业务订单号', prop: 'no', show: true },
      { label: '业务内容', prop: 'content', show: true },
      { label: '业务金额', prop: 'money', show: true },
      { label: '余额', prop: 'balance', show: true },
    ]
    headerArr.value = [
      { label: '入账时间', prop: 'time', show: true },
      { label: '业务订单号', prop: 'no', show: true },
      { label: '业务内容', prop: 'content', show: true },
      { label: '业务金额', prop: 'money', show: true },
      { label: '余额', prop: 'balance', show: true },
    ]
  }
  if (value == 2) {
    checkArr.value = [
      { label: '业务订单号', prop: 'no', show: true },
      { label: '提现金额', prop: 'money', show: true },
      { label: '状态', prop: 'status', show: true },
      { label: '支付状态', prop: 'payStatus', show: true },
      { label: '审核意见', prop: 'result', show: true },
      { label: '审核人', prop: 'resultBy', show: true },
      { label: '申请时间', prop: 'applyTime', show: true },
      { label: '支付时间', prop: 'payTime', show: true },
    ]
    headerArr.value = [
      { label: '业务订单号', prop: 'no', show: true },
      { label: '提现金额', prop: 'money', show: true },
      { label: '状态', prop: 'status', show: true },
      { label: '支付状态', prop: 'payStatus', show: true },
      { label: '审核意见', prop: 'result', show: true },
      { label: '审核人', prop: 'resultBy', show: true },
      { label: '申请时间', prop: 'applyTime', show: true },
      { label: '支付时间', prop: 'payTime', show: true },
    ]
  }
}
// 提现记录表格数据
const tableData2 = [
  {
    id: '1',
    no: '20240512555432652',
    money: '1066.00',
    applyStatus: "已申请",
    payStatus: "未到账",
    result: '审核意见',
    resultBy: "乐汇园",
    applyTime: "2024-05-10",
    payTime: "2024-05-11"
  },
  {
    id: '2',
    no: '20240512555432652',
    money: '1066.00',
    applyStatus: "已申请",
    payStatus: "未到账",
    result: '审核意见',
    resultBy: "乐汇园",
    applyTime: "2024-05-10",
    payTime: "2024-05-11"
  },
  {
    id: '3',
    no: '20240512555432652',
    money: '1066.00',
    applyStatus: "已申请",
    payStatus: "未到账",
    result: '审核意见',
    resultBy: "乐汇园",
    applyTime: "2024-05-10",
    payTime: "2024-05-11"
  },
]
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const showApply = ref(false)
// 申请提现
const onApply = () => {
  showApply.value = true
}
// 提交
const onSubmit = () => {
  showApply.value = false
}
// 关闭提现弹窗
const onClose = () => {
  showApply.value = false
}
// 选中的属性
const checkArr = ref<any>([
  { label: '入账时间', prop: 'time', show: true },
  { label: '业务订单号', prop: 'no', show: true },
  { label: '业务内容', prop: 'content', show: true },
  { label: '业务金额', prop: 'money', show: true },
  { label: '余额', prop: 'balance', show: true },
])
// 表头
const headerArr = ref<any>([
  { label: '入账时间', prop: 'time', show: true },
  { label: '业务订单号', prop: 'no', show: true },
  { label: '业务内容', prop: 'content', show: true },
  { label: '业务金额', prop: 'money', show: true },
  { label: '余额', prop: 'balance', show: true },
])
// 点击触发方法
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true)
  }, 500)
}
</script>

<style scoped lang="scss">
.wechatPayment-page {
  padding: 20px 10px;
  box-sizing: border-box;
  background-color: #f1f1f1;
}

.wechatPayment-content {
  padding: 10px;
  background: #fff;
  margin-top: 20px;
  border-radius: 4px;
}

.title {
  color: #4D4D4D;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}

// 统计
.statistic {
  width: 100%;
  border-radius: 20px;
  height: 70px;
  display: flex;
  background: #0071bb;
  align-items: center;

  .item {
    flex: 1;
    color: #fff;
    text-align: center;

    .name {}

    .value {
      font-size: 24px;
      margin-left: 20px;
      font-weight: 500;
    }
  }

  .line {
    width: 1px;
    background: #aacfe9;
    height: 40px;
  }
}

// 说明
.desc {
  padding: 10px 20px;
  margin-top: 10px;
  background: #00ffff;

  .text {
    color: #000000;
    // font-size: 18px;
    margin-bottom: 6px;
  }

  .formula {
    color: #666666;
    font-size: 12px;
  }
}

// tab表格
.tab {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0 10px;

  .search {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .btn {
      align-self: right;
    }

  }
}

.apply {
  position: absolute;
  right: 30px;
}
</style>